<template>
  <div class="ranking-filters">
    <n-card title="筛选条件" size="small">
      <div class="filters-content">
        <!-- 桌面端：紧凑两行布局 -->
        <div v-if="!isMobile" class="desktop-filters">
          <!-- 第一行：位置筛选 + 数值筛选 -->
          <div class="filter-row-1">
            <n-space align="center" :size="16" :wrap="false">
              <!-- 位置筛选 -->
              <div class="location-filter-group">
                <n-form-item label="位置">
                  <n-button-group>
                    <n-button
                      :type="localFilters.location === '' ? 'primary' : 'default'"
                      size="small"
                      @click="handleLocationChange('')"
                    >
                      <span class="button-content">
                        全部
                        <span v-if="getTotalCount()" class="count-badge">
                          {{ getTotalCount() }}
                        </span>
                      </span>
                    </n-button>
                    <n-button
                      v-for="option in locationOptions"
                      :key="option.value"
                      :type="localFilters.location === option.value ? 'primary' : 'default'"
                      size="small"
                      @click="handleLocationChange(option.value)"
                    >
                      <span class="button-content">
                        {{ option.label }}
                        <span v-if="props.locationStats?.[option.value]" class="count-badge">
                          {{ props.locationStats[option.value] }}
                        </span>
                      </span>
                    </n-button>
                  </n-button-group>
                </n-form-item>
              </div>

              <!-- 数值筛选 -->
              <div class="numeric-filters">
                <n-space align="center" :size="12">
                  <n-form-item label="最小利润">
                    <n-input-number
                      v-model:value="localFilters.minProfit"
                      placeholder="不限"
                      :min="0"
                      :step="100"
                      size="small"
                      clearable
                      @update:value="handleFilterChange"
                    >
                      <template #suffix>币</template>
                    </n-input-number>
                  </n-form-item>

                  <n-form-item label="最大周期">
                    <n-input-number
                      v-model:value="localFilters.maxCycle"
                      placeholder="不限"
                      :min="0.1"
                      :step="0.5"
                      :precision="1"
                      size="small"
                      clearable
                      @update:value="handleFilterChange"
                    >
                      <template #suffix>时</template>
                    </n-input-number>
                  </n-form-item>
                </n-space>
              </div>
            </n-space>
          </div>

          <!-- 第二行：排序方式 + 排序方向 + 操作按钮 -->
          <div class="filter-row-2">
            <n-space align="center" justify="space-between" :size="16">
              <n-space align="center" :size="16">
                <n-form-item label="排序方式">
                  <n-select
                    v-model:value="localFilters.sortBy"
                    :options="sortOptions"
                    size="small"
                    style="width: 140px;"
                    @update:value="handleFilterChange"
                  />
                </n-form-item>

                <n-form-item label="排序方向">
                  <n-radio-group
                    v-model:value="localFilters.sortOrder"
                    size="small"
                    @update:value="handleFilterChange"
                  >
                    <n-radio-button value="desc">降序</n-radio-button>
                    <n-radio-button value="asc">升序</n-radio-button>
                  </n-radio-group>
                </n-form-item>
              </n-space>

              <n-button @click="resetFilters" size="small" type="default">
                重置筛选
              </n-button>
            </n-space>
          </div>
        </div>

        <!-- 移动端：纵向布局 -->
        <div v-else class="mobile-filters">
          <n-space vertical :size="12">
            <!-- 位置和排序 -->
            <n-grid :cols="2" :x-gap="12">
              <n-grid-item>
                <n-form-item label="位置">
                  <n-space :size="8" :wrap="true">
                    <n-button
                      :type="localFilters.location === '' ? 'primary' : 'default'"
                      size="small"
                      @click="handleLocationChange('')"
                    >
                      <span class="button-content">
                        全部
                        <span v-if="getTotalCount()" class="count-badge">
                          {{ getTotalCount() }}
                        </span>
                      </span>
                    </n-button>
                    <n-button
                      v-for="option in locationOptions"
                      :key="option.value"
                      :type="localFilters.location === option.value ? 'primary' : 'default'"
                      size="small"
                      @click="handleLocationChange(option.value)"
                    >
                      <span class="button-content">
                        {{ option.label }}
                        <span v-if="props.locationStats?.[option.value]" class="count-badge">
                          {{ props.locationStats[option.value] }}
                        </span>
                      </span>
                    </n-button>
                  </n-space>
                </n-form-item>
              </n-grid-item>
              <n-grid-item>
                <n-form-item label="排序">
                  <n-select
                    v-model:value="localFilters.sortBy"
                    :options="sortOptions"
                    size="small"
                    @update:value="handleFilterChange"
                  />
                </n-form-item>
              </n-grid-item>
            </n-grid>

            <!-- 利润和周期 -->
            <n-grid :cols="2" :x-gap="12">
              <n-grid-item>
                <n-form-item label="最小利润">
                  <n-input-number
                    v-model:value="localFilters.minProfit"
                    placeholder="不限"
                    :min="0"
                    :step="100"
                    size="small"
                    clearable
                    @update:value="handleFilterChange"
                  />
                </n-form-item>
              </n-grid-item>
              <n-grid-item>
                <n-form-item label="最大周期">
                  <n-input-number
                    v-model:value="localFilters.maxCycle"
                    placeholder="不限"
                    :min="0.1"
                    :step="0.5"
                    :precision="1"
                    size="small"
                    clearable
                    @update:value="handleFilterChange"
                  />
                </n-form-item>
              </n-grid-item>
            </n-grid>

            <!-- 排序方向和操作 -->
            <n-space justify="space-between" align="center">
              <n-radio-group 
                v-model:value="localFilters.sortOrder" 
                size="small"
                @update:value="handleFilterChange"
              >
                <n-radio-button value="desc">降序</n-radio-button>
                <n-radio-button value="asc">升序</n-radio-button>
              </n-radio-group>
              
              <n-button @click="resetFilters" size="small">
                重置
              </n-button>
            </n-space>
          </n-space>
        </div>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
import type { FilterState, LocationOption, SortOption } from '@/types/specialOperation'

// Props
const props = defineProps<{
  filters: FilterState
  loading?: boolean
  locationStats?: Record<string, number>
}>()

// Emits
const emit = defineEmits<{
  'filter-change': []
  'update:filters': [filters: FilterState]
}>()

// 响应式数据
const isMobile = ref(false)
const localFilters = reactive<FilterState>({ ...props.filters })

// 位置选项 - 使用与API返回数据匹配的值
const locationOptions: LocationOption[] = [
  { label: '工作台', value: '工作台' },
  { label: '技术中心', value: '技术中心' },
  { label: '制药台', value: '制药台' },
  { label: '防具', value: '防具' }
]

// 排序选项
const sortOptions: SortOption[] = [
  { label: '每小时利润', value: 'profit_per_hour', description: '按每小时利润排序' },
  { label: '净利润', value: 'lirun', description: '按总利润排序' },
  { label: '单个利润', value: 'profit_per_item', description: '按单个物品利润排序' },
  { label: '售价', value: 'sale_price', description: '按售价排序' },
  { label: '成本', value: 'cost_price', description: '按成本价排序' },
  { label: '生产周期', value: 'period', description: '按生产周期排序' },
  { label: '生产数量', value: 'per_count', description: '按生产数量排序' },
  { label: '手续费', value: 'fee', description: '按手续费排序' },
  { label: '保证金', value: 'bail', description: '按保证金排序' }
]

// 移动端检测
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

// 获取总数量
const getTotalCount = (): number => {
  if (!props.locationStats) return 0
  return Object.values(props.locationStats).reduce((sum, count) => sum + count, 0)
}

// 处理位置变化
const handleLocationChange = (location: string) => {
  localFilters.location = location
  handleFilterChange()
}

// 处理筛选器变化
const handleFilterChange = () => {
  emit('update:filters', { ...localFilters })
  emit('filter-change')
}

// 重置筛选器
const resetFilters = () => {
  localFilters.location = ''
  localFilters.minProfit = null
  localFilters.maxCycle = null
  localFilters.sortBy = 'profit_per_hour'
  localFilters.sortOrder = 'desc'
  handleFilterChange()
}

// 监听外部筛选器变化
watch(() => props.filters, (newFilters) => {
  Object.assign(localFilters, newFilters)
}, { deep: true })

// 生命周期
onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})
</script>

<style scoped>
.ranking-filters {
  width: 100%;
}

.filters-content {
  width: 100%;
}

.desktop-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 第一行筛选器样式 */
.filter-row-1 {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.location-filter-group {
  flex: 1;
  min-width: 0;
}

.numeric-filters {
  flex-shrink: 0;
}

/* 第二行筛选器样式 */
.filter-row-2 {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding-top: 8px;
  border-top: 1px solid var(--n-border-color);
}

.mobile-filters {
  width: 100%;
}

/* 表单项样式优化 */
:deep(.n-form-item) {
  margin-bottom: 0;
}

:deep(.n-form-item-label) {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}

/* 紧凑布局下的表单项间距 */
.filter-row-1 :deep(.n-form-item),
.filter-row-2 :deep(.n-form-item) {
  margin-right: 0;
}

.filter-row-1 :deep(.n-form-item-label),
.filter-row-2 :deep(.n-form-item-label) {
  margin-bottom: 2px;
  line-height: 1.2;
}

/* 按钮内容布局 */
.button-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 数量徽章样式 */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  background: rgba(255, 255, 255, 0.2);
  color: currentColor;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 主要按钮的徽章样式 */
:deep(.n-button--primary .count-badge) {
  background: rgba(255, 255, 255, 0.25);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 默认按钮的徽章样式 */
:deep(.n-button--default .count-badge) {
  background: var(--n-primary-color);
  color: white;
}

/* 位置按钮样式 - 紧凑布局优化 */
:deep(.n-button-group .n-button) {
  border-radius: 4px;
  font-size: 12px;
  padding: 0 10px;
  height: 28px;
  transition: all 0.2s ease;
}

:deep(.n-button-group .n-button:first-child) {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

:deep(.n-button-group .n-button:last-child) {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

:deep(.n-button-group .n-button--primary) {
  background: var(--n-color);
  border-color: var(--n-color);
  color: white;
  font-weight: 500;
}

:deep(.n-button-group .n-button--default) {
  background: var(--n-color-target);
  border-color: var(--n-border-color);
  color: var(--n-text-color);
}

:deep(.n-button-group .n-button--default:hover) {
  background: var(--n-color-hover);
  border-color: var(--n-border-color-hover);
}

/* 移动端位置按钮样式 */
:deep(.n-space .n-button) {
  border-radius: 6px;
  font-size: 12px;
  padding: 0 10px;
  height: 28px;
  min-width: 50px;
}

/* 中等屏幕适配 - 桌面端紧凑布局响应式优化 */
@media (max-width: 1200px) and (min-width: 769px) {
  .filter-row-1 :deep(.n-space) {
    flex-wrap: wrap;
    gap: 12px;
  }

  .location-filter-group {
    min-width: 100%;
    margin-bottom: 8px;
  }

  .numeric-filters {
    flex: 1;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .ranking-filters {
    margin: 0 -4px;
  }

  :deep(.n-card) {
    border-radius: 8px;
  }

  :deep(.n-form-item-label) {
    font-size: 12px;
  }

  :deep(.n-space .n-button) {
    font-size: 11px;
    padding: 0 8px;
    height: 26px;
    min-width: 45px;
  }

  .count-badge {
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    border-radius: 8px;
  }
}
</style>
